<template>
	<view class="pay" v-show="showFlag">

		<!-- 顶栏 -->
		<!-- 只能有一个根元素 -->
		<u-sticky offset-top="0" bg-color="#fff">
			<view class="head"></view>
		</u-sticky>
		<!-- 卡片 -->
		<view class="main_card ">
			<view class="u-relative card0 u-padding-left-30 u-padding-top-48">
				<view class="name u-font-36 u-margin-bottom-22">
					<h3>{{name}}</h3>
				</view>
				<view class="weizhi u-font-26">{{address}}</view>
			</view>
			<view style="overflow: auto;height: 68vh;">
				<viewData :type="'noData'" :nextPage="!nextPage" :isTab="false" :isData="listData.length < 1"
					:loading="loading" @onRefresh="onRefresh">
					<view v-if="this.listData.length == 0">
						<view style="width: 232px;height: 242px;margin: 110px auto;">
							<image style="width: 100%;height: 100%;"
								src="../../static/image/9015d0e9f45344c4007d408cd271f6a.png" mode=""></image>
						</view>
						<view style="width: 62%;margin: -66px auto;text-align: center;color: #999;">暂无数据</view>
					</view>
					<view class="card2" @click="goToClick(item)" v-for="(item,index) in listData">
						<view>类型：{{item.hc_type ==1?"业主楼宇制暖":"公区楼宇制暖"}}</view>
						<view>面积：{{item.hc_area}}m²</view>
						<view>起始缴费时间：{{item.hc_anfe}}</view>
						<view>每周期金额：￥{{item.periodMoney}}</view>
						<!-- <view>单价：{{item.hc_price}}元/m²/年</view> -->
						<view class="u-flex">
							<view class="u-flex-1">应缴金额：￥<span
									style="font-size: 19px;font-weight: 550;color: #333;">{{item.money}}</span>元</view>
						</view>

					</view>
				</viewData>
			</view>
		</view>
	</view>
</template>
<script>
	import baseApi from '../../api/api.js'
	export default {
		data() {
			return {
				headText: 'asdsad',
				count: 4,
				value: 2,
				name: '',
				address: '',
				showFlag: false,
				payList: {
					costName: '',
					costNum: 0,
					wuyeMoney: 0,
					fujiaMoney: 0,
					weiyueMoney: 0,
					allMoney: 0,
				},
				pageIndex: 1,
				loading: false,
				// type: 1,
				nextPage: false,
				listData: [],
			}
		},
		async onShow() {
			this.checkLogin();
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
		},
		onPullDownRefresh() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			this.checkLogin();
		},
		methods: {
			//获取制暖
			getTableList() {
				console.log(this.pageIndex, 'pageindex')
				if (this.pageIndex < 2) {
					uni.showLoading({
						title: '加载中'
					});
				}
				this.loading = false;
				this.$request.api.getMyHotCold({
					type: 1, //1.制热 2.制冷
					pageIndex: this.pageIndex,
					room_id: this.homelist.roomId
				}).then(res => {
					console.log(res)
					if (this.pageIndex == 1) {
						this.listData = res.data.data.datalist || [];
						console.log(this.listData)
					} else {
						this.listData = [...this.listData, ...res.data.data.datalist];
					}
					console.log(this.listData)
					this.nextPage = res.data.data.isEndPage
					// this.loading = true;
					uni.hideLoading();
				})
				console.log(this.nextPage)
			},
			// 验证是否登录或实名认证
			checkLogin() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/pages/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
								_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
							this.getTableList();
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/pages/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
				uni.stopPullDownRefresh();
			},
			goToClick(val) {
				var item = JSON.stringify(val);
				uni.navigateTo({
					url: '/pages/heating/heatingpay?val=' + item
				});
			}

		}
	}
</script>

<style scoped lang="scss">
	.head {
		height: 184rpx;
		// background-color: #427705;
		background: linear-gradient(to bottom, #427705, #18b566);
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	}

	.card0 {
		height: 220rpx;
		border-radius: 6px;
		box-shadow: 0px 3px 40rpx 0px rgba(0, 0, 0, 0.1);
		top: -100rpx;
		background-color: #fff;
		z-index: 99999;
	}

	.card1 {
		height: auto;
		border-radius: 6px;
		background: linear-gradient(150deg, rgba(246, 179, 82, 1) 0%, rgba(237, 165, 59, 1) 100%);
		box-shadow: 0px 3px 40rpx 0px rgba(249, 168, 50, 0.4);
		padding-top: 40rpx;
		padding-left: 40rpx;

		view {
			margin-bottom: 20rpx;
			color: #fff;
		}
	}

	.card2 {
		// height: 300rpx;
		border-radius: 6px;
		background: linear-gradient(150deg, #427705f7 0%, #4277055c 100%);
		box-shadow: 0px 3px 40rpx 0px rgba(51, 51, 51, 0.2);
		margin-top: 46rpx;
		padding: 18px 20px 3px 20px;

		view {
			margin-bottom: 20rpx;
			color: #fff;
		}
	}

	.car2:last-child {
		margin-bottom: 100rpx;
	}

	.main_card {
		padding: 0 30rpx;
	}

	.yjq {
		border: 1px solid #fff;
		border-radius: 6px;
		box-sizing: border-box;
	}
</style>